<template>
  <section class="box">
    <section class="side-menu">
      <section
        :class="{ active: activeKey === item.key }"
        class="side-menu-item"
        v-for="item in menuList"
        :key="item.key"
        @click="menuChange(item)"
      >
        {{ item.name }}
      </section>
    </section>
    <section class="view">
      <section
        v-for="item in menuList"
        :key="item.key"
        v-show="item.key === activeKey"
      >
        <component :is="item.children" />
      </section>
    </section>
  </section>
</template>

<script lang="ts" setup>
import { reactive, ref, shallowRef } from 'vue';
import Examination from './tempExamination.vue';
import Easy from './tempDemo.vue';
import ErrorSet from './tempErrorSet.vue';
const activeKey = ref();
interface MenuListItem {
  key: string;
  name: string;
  children?: any;
}
const examinationComponent = shallowRef(Examination);
const easyComponent = shallowRef(Easy);
const errorSetComponent = shallowRef(ErrorSet);
const menuList: Array<MenuListItem> = reactive([
  {
    key: 'option',
    name: '刷题-选择题',
    children: examinationComponent,
  },
  {
    key: 'easy',
    name: '刷题-简答题',
    children: easyComponent,
  },
  {
    key: 'mockExam',
    name: '考试',
  },
  {
    key: 'error',
    name: '错题集',
    children: errorSetComponent,
  },
]);

function menuChange(item: MenuListItem) {
  activeKey.value = item.key;
}

const count = 1700;
let num = 0;
for (let i = 0; i < count; i++) {
  if (count - i > 6) {
    num += 34000 * 6;
  } else {
    num += 34000 * i;
  }
}
console.log(num);
</script>

<style lang="scss">
.box {
  display: flex;
}
.side-menu {
  width: 200px;
  min-width: 200px;
  box-sizing: border-box;
  margin-top: 24px;
  overflow: hidden;
  &-item {
    padding: 8px 16px;
    font-size: 14px;
    box-sizing: border-box;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    &:first-child {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 4px 4px 0 0;
    }
    &:last-child {
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 0 0 4px 4px;
    }
    &.active {
      background-color: #35aafc;
      color: #fff;
    }
  }
}
.view {
  flex: 1;
  padding: 0 16px;
  margin-top: 24px;
}
</style>
